<template>
  <div class="echarts">
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchInfo"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="Registration Time:" prop="reg_time">
              <el-date-picker
                type="daterange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                v-model="searchInfo.reg_time"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="18">
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <br />
    <div
      :style="{ height: '600%', width: '100%' }"
      ref="myboxAndWhiskerStatistics"
    ></div>
  </div>
</template>

<script>
export default {
  name: "BoxAndWhiskerStatistics",
  data() {
    return {
      searchInfo: {
        reg_time: [],
      },
      option: {
        title: [
          {
            text: "Michelson-Morley Experiment",
            left: "center",
          },
          {
            text: "upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR",
            borderColor: "#999",
            borderWidth: 1,
            textStyle: {
              fontWeight: "normal",
              fontSize: 14,
              lineHeight: 20,
            },
            left: "10%",
            top: "90%",
          },
        ],
        dataset: [
          {
            // prettier-ignore
            source: [
                [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
                [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
                [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
                [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
                [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
            ],
          },
          {
            transform: {
              type: "boxplot",
              config: {
                itemNameFormatter: "expr {value}",
              },
            },
          },
          {
            fromDatasetIndex: 1,
            fromTransformResult: 1,
          },
        ],
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          nameGap: 30,
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "km/s minus 299,000",
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "boxplot",
            type: "boxplot",
            datasetIndex: 1,
            itemStyle: {
              color: "#b8c5f2",
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.boxAndWhiskerStatistics();
  },
  methods: {
    boxAndWhiskerStatistics() {
      let myChart = this.$echarts.init(this.$refs.myboxAndWhiskerStatistics); //这里是为了获得容器所在位置
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>